window.addEventListener('load', function () {
  const tabNav = document.querySelector('.zhanghuerweima')
  const tabPane = document.querySelectorAll('.aaa1')
  const form = document.querySelector('form')
  // 阻止form表单的提交事件
  form.addEventListener('submit',e=>e.preventDefault())
  let index = null
  tabNav.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
      const temp = document.querySelector('.zhanghuerweima .active')
      temp.classList.remove('active')
      e.target.classList.add('active')
      index = e.target.dataset.id
    }
    for (let i = 0; i < tabPane.length; i++) {
      tabPane[i].style.display = 'none'
      tabPane[index].style.display = 'block'
    }
  })
  //  提交时判断有没有勾选同意协议
  const agree = document.querySelector('[name=agree]')
  const username = document.querySelector('[name=username]')

  //  密码和验证码切换
  const mm = document.querySelector('.qiehuandenglu')
  const zz = document.querySelector('.inputkuang')
  mm.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
      if (mm.children[0].innerHTML === '密码登录') {
        zz.innerHTML = ` <i class="iconfont icon-custom-user"></i><input required name="username" type="text" placeholder="请输入用户名" id="use2">
        <span class="msg"></span>
        <i class="iconfont icon-password"></i><input required name="password" type="password" placeholder="请输入密码" id="pwd2">`
        mm.innerHTML = `<a href="#" class="current" data-id="0">手机验证码登录</a>`
      }
      else {
        zz.innerHTML = ` <i class="iconfont icon-custom-user"></i><input required name="phone" type="text" placeholder="请输入手机号码" id="use">
        <i class="iconfont icon-password"></i><input required name="code" type="password" placeholder="请输入验证码" id="pwd">`
        mm.innerHTML = `<a href="#" data-id="1">密码登录</a>`
      }
    }
  })


  // 用户校验
  const username2 = document.querySelector('#use2')
  username2.addEventListener('change', verifyName)

  function verifyName() {
    const span = username2.nextElementSibling
    const reg = /^[a-zA-Z0-9-_]{6,10}$/
    if (!reg.test(username2.value)) {
      span.innerHTML = '输入不合法,请输入6~10位'
      return false
    }
    span.innerHTML = ''
    return true
  }
  // 手机号校验
  const phone = document.querySelector('[name=phone]')
  try {
    phone.addEventListener('change', verifyPhone)
    codeInput.addEventListener('change', verifyCode)
  } catch (error) {

  }

  function verifyPhone() {
    const span = phone.nextElementSibling
    const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    if (!reg.test(phone.value)) {
      span.innerHTML = '输入不合法，请输入11位'
      return false
    }
    span.innerHTML = ''
    return true
  }
  // 验证码校验
  const codeInput = document.querySelector('[name=code]')


  function verifyCode() {
    const span = codeInput.nextElementSibling
    const reg = /^\d{6}$/
    if (!reg.test(codeInput.value)) {
      span.innerHTML = '输入不合法，请输入6位数'
      return false
    }
    span.innerHTML = ''
    return true
  }

  // 密码效验
  const password = document.querySelector('[name=password]')
  password.addEventListener('change', verifyPwd)

  function verifyPwd() {
    const span = password.nextElementSibling
    const reg = /^[a-zA-Z0-9-_]{6,20}$/
    if (!reg.test(password.value)) {
      span.innerHTML = '输入不合法,6~20位数字字母符号组成'
      return false
    }
    span.innerHTML = ''
    return true
  }

  const dl = this.document.querySelector('.dl')
  dl.addEventListener('click', function () {
    if (agree.checked) {
      localStorage.setItem('xtx-uname', username.value)
      location.href = './index.html'
    } else {
      alert('请勾选同意协议')
    }
  })
})